<template>
  <div shoplist-box>
      <mt-header :title="this.$route.params.shop_type" fixed>
        <router-link to="/" slot="left">
            <mt-button icon="back"></mt-button>
        </router-link>
        </mt-header>
        <div class="shop_items" v-infinite-scroll="getData" infinite-scroll-disabled="loading" infinite-scroll-distance="40">
             <div v-for="(item,index) in shop_list" :key="index" class="shop-item">
            <div class="thumb">
                <img v-lazy="item.images[0]" alt="">
            </div>
            <div class="info">
                <div class="shop-title">{{item.name}}</div>
                <div>{{item.phone}}</div>
                <div>{{item.address}}</div>
                <div>{{item.businessHours}}</div>
            </div>
            </div>
             
        </div>
       
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            shop_id:this.$route.params._id,
            shop_list:[],
            limit:10,
            page:1,
            loading:false,
            total:80
        }
    },
    
    methods:{
       getData(){
           this.loading=true
           var url='https://www.escook.cn/categories/'+this.shop_id+'/shops'+'?_page='+this.page+'&_limit='+this.limit
           this.$axios.get(url)
            .then(res=>{
            // console.log(res.data);
            // this.shop_list=res.data
            var list =res.data
            this.shop_list=this.shop_list.concat(list)

            if(this.page*this.limit>=this.total){
                this.loading=true
                this.no_data()

            }else{
                this.page=this.page+1
                this.loading=false
            }
        }) 
        },
        no_data(){
            Toast({
                    message: '没有更多数据了',
                    position: 'bottom',
                    duration: 5000
                    });
        }
    }
    
}
</script>

<style scoped>
    .mint-header{
        background: #2a496d;
    }
    .shop_items{
        margin-top: 45px;
    }
    .shop-item{
        padding: 10px;
        border: 1px solid #efefef;
        margin: 10px;
        display: flex;
        box-shadow: 1px 1px 10px #bbb;
        border-radius: 5px;
        flex-direction: row;
        }
        .thumb img{
        width: 125px;
        height: 125px;
        display: block;
        margin-right: 10px;
        }
        .info{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 12px;
        }
        .shop-title{
        font-weight: bold;
        }
</style>